<template>
  <a-modal :open="open" width="800px" title="选择标签" :z-index="9999" centered ok-text="保存" @ok="onOk" @cancel="onCancel">
    <div class="min-h-[400px] max-h-[600px] overflow-auto">
      <a-list bordered class="mt-2" :data-source="tagsList" :loading="loading">
        <!-- <template #header>
          <div>
            <span class="text-grey">已选择的标签：</span>
            {{ tagData.map((tag) => tag.itemName).join(', ') }}
          </div>
        </template> -->
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="flex items-center overflow-hidden">
              <div class="w-36 p-2 border-r truncate" :title="item.labelName">{{ item.labelName }}</div>
              <div class="pl-8 flex-1 py-2 flex flex-wrap border-l -ml-[1px]">
                <div
                  v-for="childrenItem in item.children"
                  :key="childrenItem.id"
                  class="item-style"
                  :class="{ active: selectTagIds.includes(childrenItem.id) }"
                  @click="onSelectTag(childrenItem.id, childrenItem.labelId, item.inputType === 0)"
                >
                  {{ childrenItem.itemName }}
                </div>
              </div>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  tagData: {
    type: Array,
    default: () => []
  }
})
const loading = ref(true)
const tagsList = ref([])
const tagsFlatList = ref([])
const selectTagIds = ref([])
const getAllTagsList = async () => {
  loading.value = true
  const res = await post('/operation/opex/getAllTagsItem', { status: 0 })
  if (res.code !== 0) return message.error(res.msg)
  tagsList.value = res.data
  tagsFlatList.value = res.data
    .map((item) => item.children)
    .flat()
    .map((item) => {
      return {
        ...item,
        itemId: item.id
      }
    })
  loading.value = false
}
const onOk = async () => {
  const selectTags = tagsFlatList.value.filter((item) => selectTagIds.value.indexOf(item.id) !== -1)
  emit('success', selectTags)
  onCancel()
}
let selectTag = reactive({})

watch(
  () => props.open,
  (val) => {
    if (val) {
      getAllTagsList()
      selectTagIds.value = props.tagData
        .map((item) => {
          selectTag[item.labelId] = item.itemId || []
          return item.itemId
        })
        .flat()
    } else {
      selectTagIds.value = []
      selectTag = {}
    }
  }
)
const onCancel = () => {
  emit('update:open', false)
}
const onSelectTag = (id, pid, single) => {
  const isExist = selectTag[pid]?.includes(id)
  if (!selectTag[pid] || single) {
    selectTag[pid] = []
  }
  if (isExist) {
    selectTag[pid] = selectTag[pid].filter((item) => item !== id)
  } else {
    selectTag[pid].push(id)
  }
  selectTagIds.value = Object.values(selectTag).flat()
}
</script>
<style lang="less" scoped>
:deep(.ant-list-header) {
  background-color: var(--thin-color);
}
:deep(.ant-list-item) {
  padding: 0 24px;
}
.item-style {
  min-width: 64px;
  padding: 2px 8px;
  text-align: center;
  @apply mr-2 mt-2 rounded cursor-pointer bg-thin;
  &.active {
    @apply !bg-primary !text-white;
  }
  &:hover {
    @apply bg-secondary;
  }
}
</style>
